<template>
  <div class="nav">
    <div class="arrow" @click="goBack">
      <el-icon><ArrowLeft /></el-icon>
    </div>
    <!--归属，时间，音视频时间/人名  -->
    <div class="navInfo" >
      <div>{{ props.data.title? props.data.title:'南小睿的会议录音'}} </div>
      <div class="navInfo2">
        <span>{{props.data.createdTime? getYMDHS(props.data.createdTime) :"2024年3月1日 上午8:00 "}} </span>
        <!-- <span>｜ {{gettotalTimeHMS(props.data.totalTime)  }} ｜ </span>
        <span>{{ props.data.userName.slice(-2) }}</span> -->
        <span>｜ {{props.data.totalTime ? gettotalTimeHMS(props.data.totalTime): "2分16秒"}}  </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
  data: {
    type: Object,
    default() {
      return {
        id: '',
        title: '',
        createdTime: '',
        totalTime: '',
        userName: '',
        url: ''
      }
    }
  }
})


const goBack = () => {
  router.go(-1)
}

//获取年月日时分
const getYMDHS=(dateStr)=>{
  let date = new Date(dateStr);

  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let hours = date.getHours();
  
  let minutes = date.getMinutes();
  minutes=(minutes<=9)?('0'+minutes):minutes;
  let seconds = date.getSeconds();

  let period = hours < 12 ? "上午" : "下午";
  let displayHours = hours > 12 ? hours - 12 : hours;

  let formattedDate = `${year}年${month}月${day}日 ${period}${displayHours}:${minutes}`;

  // console.log(formattedDate);
  return formattedDate
}

//如果2位数字的第一位为0，则去除0
const del0=(arr)=>{
  let str=arr.toString()
  if(str[0]==0){
    str=str.slice(1)
  }
  return str
}
// 获取文件时长：时分秒
const gettotalTimeHMS=(totalTime)=>{
  let arr= totalTime.split(":") || totalTime.split("：")
  let time
  if(arr.length==2){
    time=del0(arr[0]) +'分'+del0(arr[1])+'秒'
    
    return time
  }else if(arr.length==3){
    time=del0(arr[0]) +'时'+del0(arr[1]) +'分'+del0(arr[2])+'秒'

    return time
  }else{
    return totalTime
  }
}

</script>

<style lang="less" scoped>
.nav {
  width: 100%;
  height: 83px;
  border-bottom: 1px solid rgba(217, 217, 217, 1);
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .arrow {
    margin-right: 14px;
    .el-icon svg {
      color: rgba(90, 90, 90, 1);
    }
  }

  // 归属，时间，音视频时间/人名
  .navInfo {
    margin-top: 12px;
    margin-bottom: 10px;
    & > div:nth-child(1) {
      width: 100%;
      height: 35px;
      color: rgba(51, 51, 51, 1);
      font-size: 20px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      
    }
    .navInfo2 {
      display: flex;
      span:nth-child(3) {
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        border-radius: 50%;
        background: linear-gradient(180deg, rgba(92, 219, 211, 1) 0%, rgba(19, 194, 194, 1) 100%);
        color: rgba(255, 255, 255, 1);
        font-size: 10px;
        text-align: center;
        font-family: Roboto;
      }
    }
  }
}
</style>
